<template>
  <div class="product">
    <van-dropdown-menu>
      <van-dropdown-item title="综合" disabled />
      <van-dropdown-item
        title="价格"
        v-model="priceVal"
        :options="priceArr"
        @change="priceChange"
      />
      <van-dropdown-item
        title="分类"
        v-model="categoryVal"
        :options="filterCategory"
        :filterCategory="filterCategory"
        @change="categoryChange"
      />
    </van-dropdown-menu>

    <ProductList :goodsList="goodsList" v-if="goodsList.length > 0" />
    <van-empty v-else image="search" description="没有更多了" />
  </div>
</template>
 
<script>
import ProductList from "../ProductList";
export default {
  props: ["goodsList", "filterCategory"],
  data() {
    return {
      priceVal: 0,
      // categoryVal: 0,
      priceArr: [
        // 数组中每一项的text 和 value是固定的，意味着你从后端拿到的字段如果不是text 和 value
        // 1.跟后端协约字段
        // 2.需要把myval这个字段手动改成value
        { text: "价格由高到低", value: "desc" },
        { text: "价格由低到高", value: "asc" },
      ],
      flag: false,
    };
  },
  computed: {
    categoryVal: {
      get() {
        // 返回filterCategory中某一项(checked==true)的value
        let val;
        this.filterCategory.map((item) => {
          if (item.checked) {
            val = item.value;
          }
        });
        return val;
      },
      set() {
        // 修改了当前项就可以触发
      },
    },
  },
  components: {
    ProductList,
  },
  methods: {
    priceChange(value) {
      this.$emit("priceChange", value);
    },
    categoryChange(value) {
      // console.log(value);
      this.$emit("categoryChange", value);
    },
  },
};
</script>
 
<style lang = "less" scoped>
</style>